<template>
	<view>
		<view style="width: 100%;height: 80px;background: #195B40;">
		</view>
		<view class="input-group" style="text-align: center;border-radius: 14px;margin: -40px 5% 0 5%;width: 90%;padding: 50px auto;">
			<view style="font-size: 20px;color: #333333;padding: 10px 0;">
				<view>{{companyname}}</view>
				<view>{{Address}}</view>
				</view>
				
				<view style="text-align: center;">
					<view class="qrimg" style="z-index: 55;" bindlongpress='test'>
						<tki-qrcode cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :icon="icon" :iconSize="iconsize" :onval="onval" :loadMake="loadMake" :usingComponents="true" />
					</view>
				</view>
			<view style="color: #999999; align-items: center;justify-content: center; display: flex;font-family:PingFangSC-Regular,PingFang SC;">
				<H5>(企业员工/来访人员扫码可进入信息登记页)</H5>
			</view>
			<navigator @click="downloadCode()" style="color: white;">
				<view class="action-row" style="width: 80%;height: 40px;border-radius: 15px;margin: 10px 10%;background: #195B40;line-height: 40px;color: white;">
					保存登记码到手机
				</view>
			</navigator>
			<view style="margin: 0 30px;">
				<p style='color:#74CD97'>企业可将登记码打印张贴，或发给企业员工/来访人员</p>
				<p style='margin: 30px auto;text-align: left;'>
					<p style='text-align: left;'>访客登记操作步骤</p>
					<p style='text-align: left;'>1. 扫码进入登记页面.</p>
					<p style='text-align: left;'>2. 授权登录.</p>
					<p style='text-align: left;'>3. 填写个人信息.</p>
					<p style='text-align: left;'>4. 填写测量体温.</p>
				</p>
			</view>
			<navigator url='../enterprise/enterprise' style="padding: 20px auto;color: #195B40;">
				<a>点击查看员工注册信息 >></a>
			</navigator>
			<navigator url='../../suggest/suggest' style="padding: 20px auto;color: #195B40;">
				<a>点击查看电脑端管理后台 >></a>
			</navigator>
		</view>
	</view>

</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import {findCompany} from '../../../api/index.js'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import QR from '../../../common/qrcode.js';
	import { xlsxUtil } from '../../../common/xlsxUtil.js'
	import { excelConfig } from '../../../common/hvl-excel-config.js'
	import { adviceTxt,radioTxt } from '../../../common/hvl-const.js'
	import tkiQrcode from "../../../node_modules/tki-qrcode/components/tki-qrcode/tki-qrcode.vue"
	var _self;
	var canvaPie = null;
	import moment from 'moment';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let nowDay = moment().format('YYYY-MM-DD');
	export default {
		components: {
			uniCalendar,
			tkiQrcode
		},
		data() {
			return {
				val: '', // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				icon: '/static/companyicon.jpg', // 二维码图标
				iconsize: 30, // 二维码图标大小
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				qrR:'',
				cid:'',
				companyname:'',
				Address:'',
				username: uni.getStorageSync('username'), //二维码
				ewm: '', //二维码				
				//codeImg:codeIMG,//二维码下载
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				nowDay: nowDay,
				detailUrl: '../index?day=' + nowDay,
				pieData: [],
				success_img:'',
				companylist:'',
			}
		},
		computed: mapState(['hasLogin', 'userInfo']),
		onLoad() {
			var that =this
			var _id ={company_id:wx.getStorageSync("SysId")}
			var _data=findCompany(_id)
			// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "xx"}
			Promise.resolve(_data).then(function (result) { 
				if(result.code=='0'){
					console.log(result)
					that.companyname = result.data.CompanyName
					that.Address = result.data.Address
				}
				 })
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(750);
			let ewmurl = location.href.replace('/manager/stat/stat', `/form/form?id=${wx.getStorageSync("manage_company_id")}`)
			console.log(ewmurl);
			this.ewm = QR.createQrCodeImg(ewmurl, {
				size: 350
			});
		},
		mounted() {
			var _id = wx.getStorageSync("SysId")
			console.log(_id)
			_id ='https://51epedu.cn/elt/ewm?id='+_id
			this.val =_id
			console.log(this.val)
			this.companylist = wx.getStorageSync("CompanyList")
		},
		methods: {
			// 分享功能
			onShareAppMessage: function (ops) {
			   return {
			     title: '信息登记，体温填报。',
			     path: '/pages/manager/stat/stat?id='+wx.getStorageSync("SysId"), //这里设定都是以"/page"开头,并拼接好传递的参数
			     success: function (res) {
			       // 转发成功
			       console.log(res);
			       console.log("转发成功:" + JSON.stringify(res));
			     },
			     fail: function (res) {
			       // 转发失败
			       console.log("转发失败:" + JSON.stringify(res));
			     }
			   }
			 },
			...mapMutations(['logout']),
			openCalendar() {
				this.$refs.calendar.open();
			},
			downloadCode() {
				this.$refs.qrcode._saveCode()
			},
			getExcelData: function() {
				xlsxUtil.init(
					excelConfig.companyCollect.funcName,
					{
						company: this.userInfo.company_no,
						day: this.nowDay
					},
					excelConfig.companyCollect.showFields,
					'downlink',
					excelConfig.companyCollect.downloadName
				);
				xlsxUtil.getExcelData();
			},
			confirmCalendar(e) {
				this.nowDay = e.fulldate;
				this.detailUrl = '../index?day=' + this.nowDay;
				this.getData();
			},
			getData() {
				uni.showLoading({
					title: '处理中...'
				})
				uniCloud.callFunction({
					name: 'company_collect_stat',
					data: {
						company: this.userInfo.company_no,
						day: this.nowDay
					}
				}).then((res) => {
					uni.hideLoading()
					const initData = [{
						'_id': 1,
						'data': 0
					}, {
						'_id': 2,
						'data': 0
					}, {
						'_id': 3,
						'data': 0
					}, {
						'_id': 4,
						'data': 0
					}, {
						'_id': 5,
						'data': 0
					}];
					let resData = res.result && res.result.data ? res.result.data : [];
					if (resData.length == 0) {
						resData = initData;
					} else {
						const obj = {};
						initData.map(function(item) {
							obj[item._id] = item;
						});
						resData.map(function(item) {
							obj[item._id] = item;
						});
						resData = Object.keys(obj).map(function(k) {
							return obj[k];
						});
					}
					this.pieData = resData;
					for (var i = 0, len = resData.length; i < len; i += 1) {
						resData[i].name = `${adviceTxt[resData[i]._id]}:${resData[i].data}人`;
					}
					console.log(resData);
					const chartData = {
						"series": resData
					};
					this.showPie("canvasPie", chartData);
				}).catch((err) => {
					console.log(err);
					uni.hideLoading()
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
				})
			},
			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: {
						show: true,
						float: 'center',
						padding: 5,
						lineHeight: 15,
						margin: 5,
						borderWidth: 1
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					},
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name
					}
				});
			},
		},
		onShow() {
			console.log('用户信息：', this.userInfo);
			if (this.hasLogin) {
				this.getData();
			} else {
				// this.quitLogin();
			}
		}
	}
</script>

<style>
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 10rpx;
	}

	.action-row el-button {
		color: #007aff;
		padding: 0 10px;
		font-size: 30rpx;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
		font-size: 30rpx;
	}

	.action-row span {
		margin-bottom: 20px;
	}

	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.companyInfo {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;
	}

	.noData {
		color: #888888;
		text-align: center;
		font-size: 14px;
		line-height: 10;
	}

	.qrcode {
		width: 150px;
		height: 150px;
	}
	.input-group::before{
		background: unset;
	}
	.input-group::after{
		background: unset;
	}
</style>
